import React, { Component } from 'react'
import PropTypes from 'prop-types';
import { FlatList, TouchableOpacity, ActivityIndicator, View, Text } from 'react-native'
import Button from './Button'
import styles from './Styles/AddressListStyle'

export default class AddressList extends Component {
  // Prop type warnings
  static propTypes = {
    choice: PropTypes.bool,
    data: PropTypes.array,
    navigation: PropTypes.object,
  }
  
  // Defaults for props
  static defaultProps = {
    choice: false,
    data: null,
  }

  render () {
    if (!this.props.data) {
      return
    }
    const { navigate, goBack } = this.props.navigation
    return (
      <FlatList
        style={styles.container}
        data={this.props.data}
        renderItem={({item, index}) =>
          <View
            key={index}
            style={styles.item}>
            <View style={{flex:1}}>
              <Text style={styles.name}>
                {item.name}  {item.mobile}</Text>
              <Text style={styles.description}>
                {item.area} {item.address}</Text>
            </View>
            <View>
              {this.props.choice &&
                <Button hollow small style={{marginBottom:5}}
                  onPress={() => goBack()}
                  title='选择' />
              }
              <Button hollow small
                onPress={() => navigate('AddressEditScreen',{index:index})}
                title='编辑' />
            </View>
          </View>
        }
      />
    )
  }
}
